<!DOCTYPE html>
<html>
<head>
	<title>添加开发者</title>
	<!--#include("../common/common-link.html"){}-->
	<style type="text/css">
		.layui-form-switch{margin-top: 0;width: 60px;}
		.layui-form-switch em{width: 39px;}
		.layui-form-onswitch i{left:50px}
		.table-panel .content table{margin: 0 auto;margin-top: 10px;}
		.table-panel .content table tr{height: 49px;}
		.table-panel .content table tr.btns td .btn{width: 123px;outline: none;margin-top:20px;}
		.table-panel .content table tr td .need{color: red;}
		.table-panel .content table tr td.left{text-align: right;}
		.table-panel .content table tr td.right{text-align: left;}
		.table-panel .content table tr td.right .dropdown-toggle{width: 200px;text-align: left;}
		.table-panel .content table tr td.right .dropdown-toggle .txt{overflow: hidden;vertical-align: middle;text-overflow: ellipsis;white-space: nowrap; display: inline-block;width: 160px;}
		.table-panel .content table tr td.right .dropdown-menu li{padding:2px 6px;white-space: nowrap;cursor: pointer;}
		.table-panel .content table tr td.right .form-control{width:330px;}
		.table-panel .content table tr td.center{text-align: center;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">添加开发者</h4>
				<div class="btns-group">
					<input type="button" class="btn button" onclick="javascript:window.history.back()" value="返回"/>
				</div>
			</div>
			<div class="content">
				<table>
					<tr>
						<td class="left">绑定主体：</td>
						<td class="right">
							<div class="dropdown">
								<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
								 	<span class="txt">{{companyName}}</span> 
								 	<span class="caret"></span>
								</button>
								<ul class="dropdown-menu" v-if="companys&&companys.length>0">
									<li v-for="(company,index) in companys" @click="selectCompany(index)">{{company.name}}</li>
								</ul>
							</div>
						</td>
					</tr>
					<tr>
						<td class="left">状态：</td>
						<td class="right">
							<div class="layui-form" v-if="form.status">
								<div id="switch" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>可用</em><i></i></div>
							</div>
							<div class="layui-form" v-else>
								<div id="switch" class="layui-unselect layui-form-switch" lay-skin="_switch"><em>不可用</em><i></i></div>
							</div>
						</td>
					</tr>
					<tr class="btns">
						<td class="center" colspan="2">
							<div class="btn-group" role="group" aria-label="...">
								<button type="button" class="btn button ok_btn" @click="submit">提交</button>
							  	<button type="button" class="btn button cancel_btn" @click="cancel">取消</button>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var pageData = {};
	var form={};
	function initVue() {
		form.status=0;
		pageData.form=form;
		pageData.companyName="请选择主体";
		request();
		new Vue({
			el:"#container-wrap",
			data:pageData
		});
		Vue.nextTick(function() {
			bindEvent();
			$("#container-wrap").show();
		});
	};
	function bindEvent(){
		$("#switch").click(processStatus);
	};
	function request(){
		var load_id = util.load();
		var _form={};
		_form.page=0;
		util.syncPost({
			url:"/company/list",
			data:_form,
			success : function(result) {
				$.extend(pageData, result);
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function selectCompany(i){
		var _company=pageData.companys[i];
		pageData.companyName=_company.name;
		form.companyId=_company.id;
	};
	function processStatus(){
		if(form.status){
			form.status=0;
		}else{
			form.status=1;
		}
		Vue.nextTick(function() {
			$("#switch").click(processStatus);
		});
	};
	function submit(){
		if(!form.companyId){
			util.warning("请选择主体！");
			return ;
		}
		var load_id = util.load();
		util.post({
			url:"/developer/add",
			data:form,
			success : function(result) {
				cancel();
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	}
	function cancel(){
		window.history.back();
	};
</script>
</html>